<% cache "comment-box-#{@last_user_reaction}-#{@last_user_comment}-#{subscription_status_indicator}-#{notification.comment_updated_at}-#{notification.comment_id}" do %>
  <% if notification.commentable %>
    <% if notification.comment_depth > 0 %>
      <h3>
        <a href="<%= notification.comment_last_ancestor["path"] %>" class="crayons-link notification__reply-title">
          <%= t("views.comments.re.text_html", re: tag.span(t("views.comments.re.re"), class: "fw-normal opacity-50"), title: notification.comment_last_ancestor["title"]) %>
        </a>
      </h3>
    <% end %>
    <div class="crayons-card notification__preview relative">
      <div class="text-styles text-styles--tertiary notification__preview__inner">
        <%= notification.comment_processed_html.html_safe %>
      </div>

      <% if context == "moderation" && current_user.has_trusted_role? %>
        <div class="crayons-card crayons-card--secondary crayons-card--elevated notification__mod-controls">
          <button
            class="crayons-btn crayons-btn--icon crayons-btn--icon-rounded crayons-btn--ghost inline-flex crayons-btn--s reaction-button <%= notification.any_cached_reactions_for_object?(current_user, "comment", category: "thumbsdown") ? "reacted" : "" %>"
            data-reactable-id="<%= notification.comment_id %>"
            data-category="thumbsdown"
            data-reactable-type="Comment"
            title="thumbsdown">
            <%= crayons_icon_tag("twemoji/thumb-down", native: true, class: "reaction-icon", title: "Thumb down") %>
          </button>
          <button
            class="crayons-btn crayons-btn--icon crayons-btn--icon-rounded crayons-btn--ghost inline-flex crayons-btn--s reaction-button <%= notification.any_cached_reactions_for_object?(current_user, "comment", category: "vomit") ? "reacted" : "" %>"
            data-reactable-id="<%= notification.comment_id %>"
            data-category="vomit"
            data-reactable-type="Comment"
            title="<%= t("views.reactions.category.vomit") %>">
            <%= crayons_icon_tag("twemoji/flag", native: true, class: "reaction-icon", title: "Suspicious") %>
          </button>
        </div>
      <% end %>

      <footer class="comment-actions">
        <div class="notification__actions">
          <button
            class="crayons-tooltip__activator relative crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button <%= notification.any_cached_reactions_for_object?(current_user, "comment") ? "reacted" : "" %>"
            data-reactable-id="<%= notification.comment_id %>"
            data-category="like"
            data-reactable-type="Comment"
            aria-label="<%= t("views.reactions.like.aria_label") %>">
            <%= crayons_icon_tag("small-heart", class: "reaction-icon not-reacted", aria_hidden: true, title: t("views.comments.footer.heart.icon")) %>
            <%= crayons_icon_tag("small-heart-filled", class: "reaction-icon--like reaction-icon reacted", aria_hidden: true, title: t("views.comments.footer.heart.icon")) %>
            <span class="hidden m:inline-block"><%= t("views.comments.footer.heart.text") %></span>
            <span data-testid="tooltip" class="crayons-tooltip__content">
              <%= t("views.comments.footer.heart.title") %>
            </span>
          </button>

          <% cache "comment-box-comment-reply-#{@last_user_comment}-#{notification.comment_updated_at}-#{notification.comment_id}" do %>
            <% reply = Comment.select(:id, :user_id, :ancestry).find_by(id: notification.comment_id)&.children&.find_by(user_id: current_user.id) %>
            <% if reply %>
              <a class="crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left mr-1 inline-flex reaction-comment reacted" href="<%= reply.path %>" aria-label="<%= t("views.comments.footer.reply.done") %>">
                <%= crayons_icon_tag("small-comment-filled", class: "reaction-icon--comment reaction-icon reacted", aria_hidden: true, title: t("views.comments.footer.reply.icon")) %>
                <span class="hidden m:inline-block"><%= t("views.comments.footer.reply.done") %></span>
              </a>
            <% else %>
              <button class="crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex"
                 data-reactable-id="<%= notification.comment_id %>"
                 aria-label="<%= t("views.comments.footer.reply.text") %>">
                <%= crayons_icon_tag("small-comment", class: "reaction-icon not-reacted", aria_hidden: true, title: t("views.comments.footer.reply.icon")) %>
                <%= crayons_icon_tag("small-comment-filled", class: "reaction-icon--comment reaction-icon reacted", aria_hidden: true, title: t("views.comments.footer.reply.icon")) %>
                <span class="hidden m:inline-block"><%= t("views.comments.footer.reply.text") %></span>
              </button>
            <% end %>
          <% end %>
          <a href="<%= notification.comment_path %>" class="crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s inline-flex">
            <%= crayons_icon_tag("small-link", title: t("views.comments.footer.view.icon")) %>
            <span class="hidden m:inline-block"><%= t("views.comments.footer.view.text") %></span>
          </a>

          <% subscription = notification.subscription_for(current_user) %>
          <button
            class="ml-auto crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s subscribe-button <%= subscription ? "comment-subscribed" : "" %>"
            data-subscription_id="<%= subscription&.id %>"
            data-subscribed_to="<%= subscription&.notifiable_type&.downcase %>"
            data-subscription_config="<%= subscription&.notifiable_type == "Comment" ? "thread" : (subscription&.config || "all_comments") %>"
            data-article_id="<%= notification.article_id || notification.commentable_article_id %>"
            data-comment_id="<%= subscription&.notifiable_id if subscription&.notifiable_type == "Comment" %>"
            data-ancestry="<%= notification.comment_ancestry %>">
            <%= crayons_icon_tag("bell-active", class: "subscribe-icon subscribed", aria_hidden: true, title: t("views.comments.footer.subscribe.icon")) %>
            <%= crayons_icon_tag("bell", class: "subscribe-icon not-subscribed", aria_hidden: true, title: t("views.comments.footer.subscribe.icon")) %>
            <span class="m:inline-block subscribe-button-title"><%= t("views.comments.footer.subscribe.text") %></span>
          </button>
        </div>

        <% @comment = Comment.new %>
        <%= form_for(@comment,
                     authenticity_token: false,
                     html: { id: "comment-form-for-#{notification.comment_id}", onsubmit: "handleCommentSubmit.bind(this)(event)", onkeydown: "handleKeyDown(event)", class: "p-2 pb-1 pt-3 hidden" }) do |f| %>
          <%= f.hidden_field :commentable_id, value: notification.commentable_id %>
          <%= f.hidden_field :commentable_type, value: notification.commentable_class_name %>
          <%= f.hidden_field :parent_id, value: notification.comment_id %>
          <%= f.text_area :body_markdown,
                          id: "comment-textarea-for-#{notification.comment_id}",
                          class: "comment-textarea crayons-textfield mb-2 resize-y",
                          placeholder: t("views.comments.footer.reply.placeholder"),
                          "aria-label": t("views.comments.footer.reply.aria_label"),
                          onfocus: "handleFocus(event)" %>
          <div class="actions">
            <button type="submit" class="crayons-btn comment-action-button" onclick="validateField(event)"><%= t("views.comments.write.submit") %></button>
          </div>
        <% end %>
      </footer>
    </div>
  <% end %>
<% end %>
